<!-- 骨架屏 -->
<template name="skeleton">
  <view>
    <view is="components/tphSwiper">
      <view>
        <swiper
          :circular="true"
          :autoplay="false"
          class="swiper tphSwiper--swiper"
          :duration="250"
          indicator-active-color="#ffffff"
          indicator-color="rgba(255, 255, 255, .3)"
          :indicator-dots="true"
          :interval="3000"
          :current="0"
        >
          <swiper-item
            style="
              position: absolute;
              width: 100%;
              height: 100%;
              transform: translate(0%, 0px) translateZ(0px);
            "
          >
            <navigator style="width: 100%; height: 100%">
              <image mode="scaleToFill" style="width: 100%; height: 100%" class="sk-image"></image>
            </navigator>
          </swiper-item>
          <swiper-item
            style="
              position: absolute;
              width: 100%;
              height: 100%;
              transform: translate(-100%, 0px) translateZ(0px);
            "
          >
            <navigator style="width: 100%; height: 100%">
              <image mode="scaleToFill" style="width: 100%; height: 100%" class="sk-image"></image>
            </navigator>
          </swiper-item>
        </swiper>
      </view>
    </view>
    <view is="pages/index/components/categoryPanel">
      <view style="margin: 10px 0 20px 0">
        <view is="node-modules/@dcloudio/uni-ui/lib/uni-grid/uni-grid">
          <view class="uni-grid-wrap grid--uni-grid-wrap">
            <view
              class="uni-grid grid--uni-grid"
              style="border-left-color: #d2d2d2"
              id="876996e3--Uni_2oz2"
            >
              <view is="node-modules/@dcloudio/uni-ui/lib/uni-grid-item/uni-grid-item">
                <view class="uni-grid-item item--uni-grid-item" style="width: 74px; height: 74px">
                  <view
                    class="uni-highlight item--uni-highlight uni-grid-item__box item--uni-grid-item__box"
                    style="
                      border-right-color: #d2d2d2;
                      border-bottom-color: #d2d2d2;
                      border-top-color: #d2d2d2;
                    "
                  >
                    <view
                      class="grid-item-box categoryPanel--grid-item-box"
                      style="background-color: #fff"
                    >
                      <navigator class="item_box categoryPanel--item_box">
                        <image class="icon categoryPanel--icon sk-image"></image>
                        <view
                          class="text categoryPanel--text sk-transparent sk-text-14-2857-128 sk-text"
                          >居家</view
                        >
                      </navigator>
                    </view>
                  </view>
                </view>
              </view>
              <view is="node-modules/@dcloudio/uni-ui/lib/uni-grid-item/uni-grid-item">
                <view class="uni-grid-item item--uni-grid-item" style="width: 74px; height: 74px">
                  <view
                    class="uni-highlight item--uni-highlight uni-grid-item__box item--uni-grid-item__box"
                    style="
                      border-right-color: #d2d2d2;
                      border-bottom-color: #d2d2d2;
                      border-top-color: #d2d2d2;
                    "
                  >
                    <view
                      class="grid-item-box categoryPanel--grid-item-box"
                      style="background-color: #fff"
                    >
                      <navigator class="item_box categoryPanel--item_box">
                        <image class="icon categoryPanel--icon sk-image"></image>
                        <view
                          class="text categoryPanel--text sk-transparent sk-text-14-2857-22 sk-text"
                          >锦鲤</view
                        >
                      </navigator>
                    </view>
                  </view>
                </view>
              </view>
              <view is="node-modules/@dcloudio/uni-ui/lib/uni-grid-item/uni-grid-item">
                <view class="uni-grid-item item--uni-grid-item" style="width: 74px; height: 74px">
                  <view
                    class="uni-highlight item--uni-highlight uni-grid-item__box item--uni-grid-item__box"
                    style="
                      border-right-color: #d2d2d2;
                      border-bottom-color: #d2d2d2;
                      border-top-color: #d2d2d2;
                    "
                  >
                    <view
                      class="grid-item-box categoryPanel--grid-item-box"
                      style="background-color: #fff"
                    >
                      <navigator class="item_box categoryPanel--item_box">
                        <image class="icon categoryPanel--icon sk-image"></image>
                        <view
                          class="text categoryPanel--text sk-transparent sk-text-14-2857-30 sk-text"
                          >服饰</view
                        >
                      </navigator>
                    </view>
                  </view>
                </view>
              </view>
              <view is="node-modules/@dcloudio/uni-ui/lib/uni-grid-item/uni-grid-item">
                <view class="uni-grid-item item--uni-grid-item" style="width: 74px; height: 74px">
                  <view
                    class="uni-highlight item--uni-highlight uni-grid-item__box item--uni-grid-item__box"
                    style="
                      border-right-color: #d2d2d2;
                      border-bottom-color: #d2d2d2;
                      border-top-color: #d2d2d2;
                    "
                  >
                    <view
                      class="grid-item-box categoryPanel--grid-item-box"
                      style="background-color: #fff"
                    >
                      <navigator class="item_box categoryPanel--item_box">
                        <image class="icon categoryPanel--icon sk-image"></image>
                        <view
                          class="text categoryPanel--text sk-transparent sk-text-14-2857-676 sk-text"
                          >母婴</view
                        >
                      </navigator>
                    </view>
                  </view>
                </view>
              </view>
              <view is="node-modules/@dcloudio/uni-ui/lib/uni-grid-item/uni-grid-item">
                <view class="uni-grid-item item--uni-grid-item" style="width: 74px; height: 74px">
                  <view
                    class="uni-highlight item--uni-highlight uni-grid-item__box item--uni-grid-item__box"
                    style="
                      border-right-color: #d2d2d2;
                      border-bottom-color: #d2d2d2;
                      border-top-color: #d2d2d2;
                    "
                  >
                    <view
                      class="grid-item-box categoryPanel--grid-item-box"
                      style="background-color: #fff"
                    >
                      <navigator class="item_box categoryPanel--item_box">
                        <image class="icon categoryPanel--icon sk-image"></image>
                        <view
                          class="text categoryPanel--text sk-transparent sk-text-14-2857-392 sk-text"
                          >个护</view
                        >
                      </navigator>
                    </view>
                  </view>
                </view>
              </view>
              <view is="node-modules/@dcloudio/uni-ui/lib/uni-grid-item/uni-grid-item">
                <view class="uni-grid-item item--uni-grid-item" style="width: 74px; height: 74px">
                  <view
                    class="uni-highlight item--uni-highlight uni-grid-item__box item--uni-grid-item__box"
                    style="
                      border-right-color: #d2d2d2;
                      border-bottom-color: #d2d2d2;
                      border-top-color: #d2d2d2;
                    "
                  >
                    <view
                      class="grid-item-box categoryPanel--grid-item-box"
                      style="background-color: #fff"
                    >
                      <navigator class="item_box categoryPanel--item_box">
                        <image class="icon categoryPanel--icon sk-image"></image>
                        <view
                          class="text categoryPanel--text sk-transparent sk-text-14-2857-243 sk-text"
                          >严选</view
                        >
                      </navigator>
                    </view>
                  </view>
                </view>
              </view>
              <view is="node-modules/@dcloudio/uni-ui/lib/uni-grid-item/uni-grid-item">
                <view class="uni-grid-item item--uni-grid-item" style="width: 74px; height: 74px">
                  <view
                    class="uni-highlight item--uni-highlight uni-grid-item__box item--uni-grid-item__box"
                    style="
                      border-right-color: #d2d2d2;
                      border-bottom-color: #d2d2d2;
                      border-top-color: #d2d2d2;
                    "
                  >
                    <view
                      class="grid-item-box categoryPanel--grid-item-box"
                      style="background-color: #fff"
                    >
                      <navigator class="item_box categoryPanel--item_box">
                        <image class="icon categoryPanel--icon sk-image"></image>
                        <view
                          class="text categoryPanel--text sk-transparent sk-text-14-2857-212 sk-text"
                          >数码</view
                        >
                      </navigator>
                    </view>
                  </view>
                </view>
              </view>
              <view is="node-modules/@dcloudio/uni-ui/lib/uni-grid-item/uni-grid-item">
                <view class="uni-grid-item item--uni-grid-item" style="width: 74px; height: 74px">
                  <view
                    class="uni-highlight item--uni-highlight uni-grid-item__box item--uni-grid-item__box"
                    style="
                      border-right-color: #d2d2d2;
                      border-bottom-color: #d2d2d2;
                      border-top-color: #d2d2d2;
                    "
                  >
                    <view
                      class="grid-item-box categoryPanel--grid-item-box"
                      style="background-color: #fff"
                    >
                      <navigator class="item_box categoryPanel--item_box">
                        <image class="icon categoryPanel--icon sk-image"></image>
                        <view
                          class="text categoryPanel--text sk-transparent sk-text-14-2857-219 sk-text"
                          >运动</view
                        >
                      </navigator>
                    </view>
                  </view>
                </view>
              </view>
              <view is="node-modules/@dcloudio/uni-ui/lib/uni-grid-item/uni-grid-item">
                <view class="uni-grid-item item--uni-grid-item" style="width: 74px; height: 74px">
                  <view
                    class="uni-highlight item--uni-highlight uni-grid-item__box item--uni-grid-item__box"
                    style="
                      border-right-color: #d2d2d2;
                      border-bottom-color: #d2d2d2;
                      border-top-color: #d2d2d2;
                    "
                  >
                    <view
                      class="grid-item-box categoryPanel--grid-item-box"
                      style="background-color: #fff"
                    >
                      <navigator class="item_box categoryPanel--item_box">
                        <image class="icon categoryPanel--icon sk-image"></image>
                        <view
                          class="text categoryPanel--text sk-transparent sk-text-14-2857-470 sk-text"
                          >杂项</view
                        >
                      </navigator>
                    </view>
                  </view>
                </view>
              </view>
              <view is="node-modules/@dcloudio/uni-ui/lib/uni-grid-item/uni-grid-item">
                <view class="uni-grid-item item--uni-grid-item" style="width: 74px; height: 74px">
                  <view
                    class="uni-highlight item--uni-highlight uni-grid-item__box item--uni-grid-item__box"
                    style="
                      border-right-color: #d2d2d2;
                      border-bottom-color: #d2d2d2;
                      border-top-color: #d2d2d2;
                    "
                  >
                    <view
                      class="grid-item-box categoryPanel--grid-item-box"
                      style="background-color: #fff"
                    >
                      <navigator class="item_box categoryPanel--item_box">
                        <image class="icon categoryPanel--icon sk-image"></image>
                        <view
                          class="text categoryPanel--text sk-transparent sk-text-14-2857-746 sk-text"
                          >品牌</view
                        >
                      </navigator>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view is="pages/index/components/hotPanel">
      <view class="hotPanel_box hotPanel--hotPanel_box">
        <view is="node-modules/@dcloudio/uni-ui/lib/uni-grid/uni-grid">
          <view class="uni-grid-wrap grid--uni-grid-wrap">
            <view
              class="uni-grid grid--uni-grid"
              style="border-left-color: #d2d2d2"
              id="e96ce043--Uni_k4dh"
            >
              <view is="node-modules/@dcloudio/uni-ui/lib/uni-grid-item/uni-grid-item">
                <view class="uni-grid-item item--uni-grid-item" style="width: 177px">
                  <view
                    class="uni-highlight item--uni-highlight uni-grid-item__box item--uni-grid-item__box"
                    style="
                      border-right-color: #d2d2d2;
                      border-bottom-color: #d2d2d2;
                      border-top-color: #d2d2d2;
                    "
                  >
                    <navigator>
                      <view
                        class="grid-item-box hotPanel--grid-item-box"
                        style="background-color: #fff"
                      >
                        <view class="title_box hotPanel--title_box">
                          <text
                            class="frist_title hotPanel--frist_title sk-transparent sk-text-14-2857-733 sk-text"
                            >特惠推荐</text
                          >
                          <text class="sk-transparent sk-text-14-2857-698 sk-text">精选全攻略</text>
                        </view>
                        <view class="image_box hotPanel--image_box">
                          <image
                            class="image hotPanel--image sk-image"
                            style="margin-right: 7px"
                          ></image>
                          <image class="image hotPanel--image sk-image"></image>
                        </view>
                      </view>
                    </navigator>
                  </view>
                </view>
              </view>
              <view is="node-modules/@dcloudio/uni-ui/lib/uni-grid-item/uni-grid-item">
                <view class="uni-grid-item item--uni-grid-item" style="width: 177px">
                  <view
                    class="uni-highlight item--uni-highlight uni-grid-item__box item--uni-grid-item__box"
                    style="
                      border-right-color: #d2d2d2;
                      border-bottom-color: #d2d2d2;
                      border-top-color: #d2d2d2;
                    "
                  >
                    <navigator>
                      <view
                        class="grid-item-box hotPanel--grid-item-box"
                        style="background-color: #fff"
                      >
                        <view class="title_box hotPanel--title_box">
                          <text
                            class="frist_title hotPanel--frist_title sk-transparent sk-text-14-2857-947 sk-text"
                            >爆款推荐</text
                          >
                          <text class="sk-transparent sk-text-14-2857-439 sk-text">最受欢迎</text>
                        </view>
                        <view class="image_box hotPanel--image_box">
                          <image
                            class="image hotPanel--image sk-image"
                            style="margin-right: 7px"
                          ></image>
                          <image class="image hotPanel--image sk-image"></image>
                        </view>
                      </view>
                    </navigator>
                  </view>
                </view>
              </view>
              <view is="node-modules/@dcloudio/uni-ui/lib/uni-grid-item/uni-grid-item">
                <view class="uni-grid-item item--uni-grid-item" style="width: 177px">
                  <view
                    class="uni-highlight item--uni-highlight uni-grid-item__box item--uni-grid-item__box"
                    style="
                      border-right-color: #d2d2d2;
                      border-bottom-color: #d2d2d2;
                      border-top-color: #d2d2d2;
                    "
                  >
                    <navigator>
                      <view
                        class="grid-item-box hotPanel--grid-item-box"
                        style="background-color: #fff"
                      >
                        <view class="title_box hotPanel--title_box">
                          <text
                            class="frist_title hotPanel--frist_title sk-transparent sk-text-14-2857-623 sk-text"
                            >一站买全</text
                          >
                          <text class="sk-transparent sk-text-14-2857-303 sk-text">精心优选</text>
                        </view>
                        <view class="image_box hotPanel--image_box">
                          <image
                            class="image hotPanel--image sk-image"
                            style="margin-right: 7px"
                          ></image>
                          <image class="image hotPanel--image sk-image"></image>
                        </view>
                      </view>
                    </navigator>
                  </view>
                </view>
              </view>
              <view is="node-modules/@dcloudio/uni-ui/lib/uni-grid-item/uni-grid-item">
                <view class="uni-grid-item item--uni-grid-item" style="width: 177px">
                  <view
                    class="uni-highlight item--uni-highlight uni-grid-item__box item--uni-grid-item__box"
                    style="
                      border-right-color: #d2d2d2;
                      border-bottom-color: #d2d2d2;
                      border-top-color: #d2d2d2;
                    "
                  >
                    <navigator>
                      <view
                        class="grid-item-box hotPanel--grid-item-box"
                        style="background-color: #fff"
                      >
                        <view class="title_box hotPanel--title_box">
                          <text
                            class="frist_title hotPanel--frist_title sk-transparent sk-text-14-2857-559 sk-text"
                            >新鲜好物</text
                          >
                          <text class="sk-transparent sk-text-14-2857-728 sk-text">生活加分项</text>
                        </view>
                        <view class="image_box hotPanel--image_box">
                          <image
                            class="image hotPanel--image sk-image"
                            style="margin-right: 7px"
                          ></image>
                          <image class="image hotPanel--image sk-image"></image>
                        </view>
                      </view>
                    </navigator>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
/* #ifdef APP-PLUS || H5 */
@import '../../../components/style/tphGuess.scss';
@import '../../../components/style/tphSwiper.scss';
@import './styles/categoryPanel.scss';
@import './styles/hotPanel.scss';
.uni-grid {
  display: flex;
  flex-wrap: wrap
}
/* #endif */
.hotPanel_box {
  margin: 0 20rpx;
  overflow: hidden;
}
.hotPanel_box .grid-item-box {
  display: flex;
  flex-direction: column;
  width: 350rpx;
  height: 260rpx;
  padding-left: 20rpx;
  border: 2rpx solid #f7f7f7;
}
.hotPanel_box .grid-item-box .title_box {
  display: flex;
  align-items: center;
  font-size: 25rpx;
  padding: 20rpx 0;
  color: #999;
}
.hotPanel_box .grid-item-box .title_box .frist_title {
  font-size: 35rpx;
  font-weight: 700;
  color: #333;
  margin-right: 15rpx;
}
.hotPanel_box .grid-item-box .image_box {
  width: 100%;
  height: 100rpx;
}
.hotPanel_box .grid-item-box .image_box .image {
  width: 150rpx;
  height: 150rpx;
}
.navbar_box {
  background-color: #f42433;
  color: #ffffff;
  padding-left: 20rpx;
  padding-right: 20rpx;
  padding-bottom: 20rpx;
}
.navbar_box .title_box {
  display: flex;
  align-items: center;
  height: 60rpx;
  margin: 15rpx 0 20rpx 0;
}
.navbar_box .title_box .tag_box {
  padding-bottom: 8rpx;
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.7);
}
.navbar_box .search_box {
  border-radius: 36rpx;
  overflow: hidden;
}
.navbar_box .search_box .uniui-search {
  font-size: 18px !important;
}
.grid-item-box {
  height: 100%;
  margin-top: 20rpx;
  background-color: transparent !important;
}
.grid-item-box .item_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.grid-item-box .item_box .icon {
  width: 100rpx;
  height: 100rpx;
}
.grid-item-box .item_box .text {
  font-size: 26rpx;
}
.sk-transparent {
  color: transparent !important;
}
.sk-opacity {
  opacity: 0 !important;
}
.sk-text-14-2857-162 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 33.6rpx;
  position: relative !important;
}
.sk-text {
  background-origin: content-box !important;
  background-clip: content-box !important;
  background-color: transparent !important;
  color: transparent !important;
  background-repeat: repeat-y !important;
}
.sk-text-14-2857-128 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 36.4rpx;
  position: relative !important;
}
.sk-text-14-2857-22 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 36.4rpx;
  position: relative !important;
}
.sk-text-14-2857-30 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 36.4rpx;
  position: relative !important;
}
.sk-text-14-2857-676 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 36.4rpx;
  position: relative !important;
}
.sk-text-14-2857-392 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 36.4rpx;
  position: relative !important;
}
.sk-text-14-2857-243 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 36.4rpx;
  position: relative !important;
}
.sk-text-14-2857-212 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 36.4rpx;
  position: relative !important;
}
.sk-text-14-2857-219 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 36.4rpx;
  position: relative !important;
}
.sk-text-14-2857-470 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 36.4rpx;
  position: relative !important;
}
.sk-text-14-2857-746 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 36.4rpx;
  position: relative !important;
}
.sk-text-14-2857-733 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 47.6rpx;
  position: relative !important;
}
.sk-text-14-2857-698 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 33.6rpx;
  position: relative !important;
}
.sk-text-14-2857-947 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 47.6rpx;
  position: relative !important;
}
.sk-text-14-2857-439 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 33.6rpx;
  position: relative !important;
}
.sk-text-14-2857-623 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 47.6rpx;
  position: relative !important;
}
.sk-text-14-2857-303 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 33.6rpx;
  position: relative !important;
}
.sk-text-14-2857-559 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 47.6rpx;
  position: relative !important;
}
.sk-text-14-2857-728 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 33.6rpx;
  position: relative !important;
}
.sk-image {
  background: #efefef !important;
}
.sk-pseudo::before,
.sk-pseudo::after {
  background: #efefef !important;
  background-image: none !important;
  color: transparent !important;
  border-color: transparent !important;
}
.sk-pseudo-rect::before,
.sk-pseudo-rect::after {
  border-radius: 0 !important;
}
.sk-pseudo-circle::before,
.sk-pseudo-circle::after {
  border-radius: 50% !important;
}
.sk-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: transparent;
}
</style>
